Household members need a way to access a single platform to communicate all of their domestic appliance problems in a time-saving and easy way because they want an instant and high-quality answer and solution from the same platform without having to search and consult different platforms, channels or companies which cost time, energy and is no guarantee for success.

A web app as a video-chat platform that allows the household member to upload a picture of the object and due to photo recognition software which identifies the brand/company, the request for a video callback is automatically transferred to the right company. The company will video-call back, is then confronted with the problem and will come up with a solution.

When the photo upload does not work, a backup list of brands/companies is there to choose from.

I’m using the Design Thinking Process to create the web app from ideation, conceptualization, iteration to lastly the exposition phase where I will present my work.

After doing a competitor analysis, I started with the user research including the analysis. The user research findings were then grouped for each participant, clustered and consolidated.The output was used for the conceptualization phase.

After doing the user research and analysis, it turned out that part of the hypothesis - using photo recognition software to identify the company of the product - was not perceived as something the participants would use and so this part is rejected. Also due to the fact that this particular outcome didn't deliver statistically relevant data, this part of the hypothesis will "parked" and researched in a future stage.

I used my clusters and their key insights as a foundation for the personas. Therefore I took the assumption that each defined cluster is a persona with its own key insights which are translated into needs, goals, behavior and pain points. This resulted in 2 personas: Elly and Liam. Going from here, customer journeys and user flows were defined and designed. The image below shows the persona, user journey and user flow of Elly.

In order to define the information architecture of the web app, a card sort and analysis was performed with the sitemap as output. The image below shows the sitemap after using the similarity analysis of the card sorting.

Low and mid fidelity wireframes were designed to start demonstrating the functions and the usability of the features of the web app. The image below shows the design steps from Low Fidelity Wireframes towards Mid Fidelity Wireframes.

Taking the Mid Fidelity Wireframes as a foundation, the High Fidelity Wireframes were designed and came into the mix. These wireframes were created in Sketch and were put together according to the different user flows and uploaded in InVision. In InVision they were linked together so that the prototype was ready for testing. Below is an image of the High Fidelity Wireframes put together as a prototype using a user flow as a basis ("posting a message to a company").

For the whole testing phase, a usability plan and test script was put together. Using audio and video software, I was able to record all the users movements, where they were going and what they were thinking. Important was the fact that they had to think out loud. Using affinity mapping to analyze and sort the findings, the test results and analysis came with a lot of adjustable elements from which 5 were chosen for applying the changes. The image below shows the affinity mapping by using post-its and the test results and rainbow analysis.

It's time to create the design documentation to make the web app design easier to reuse and standardize. This will help set up the design’s visual integrity and function as a "howto" description for the developers. In other words, this is a design guide. Google's Material Design Guide is used as a foundation for the creation of the Design Language for this web app. The image below shows a part of it - the colors - used for the web app of this Design Language Guide.

The mockups are based on the Design Language and have a strong connection with Google's Material Design. The overall design is kept in a monochrome coloring but the elements which are important to the user on the different screens have a non-monochrome color set to let them stick out and grab the attention of the user. The image below shows the end result (aka mockups) of the web app.